<template>
  <div class="blog-list-container" v-loading="isLoading" ref="blogList">
    <ul v-for="item in data.rows" :key="item.id">
      <div class="thumb" v-if="item.thumb">
        <RouterLink
          :to="{
            name: 'Detail',
            params: {
              id: item.id, //当前的文章id
            },
          }"
        >
          <img  v-lazy="item.thumb"/>
        </RouterLink>
      </div>
      <div class="main">
        <RouterLink
          :to="{
            name: 'Detail',
            params: {
              id: item.id, //当前的文章id
            },
          }"
        >
          <h2>{{ item.title }}</h2>
        </RouterLink>
        <div class="aside">
          <span>日期: {{ item.date }}</span>
          <span>浏览: {{ item.scanNumber }}</span>
          <span>评论: {{ item.commentNumber }}</span>
          <RouterLink
            :to="{
              name: 'CategoryBlog',
              params: {
                categoryId: item.category.id,
              },
            }"
            >{{ item.category.name }}</RouterLink
          >
        </div>
        <div class="desc">{{ item.description }}</div>
      </div>
    </ul>
    <Empty v-if="data.rows.length == 0 && !isLoading" />
    <!-- 分页 -->
    <Pager
      v-if="data.total"
      :total="data.total"
      :current="routeInfo.page"
      :limit="routeInfo.limit"
      :visibleNumber="10"
      @pageChange="handlePageChange"
    ></Pager>
  </div>
</template>

<script>
import Pager from "@/components/Pager";
import Empty from "@/components/Empty";
import fetchData from "@/mixins/fetchData.js";
import { getBlogs } from "@/api/blog.js";
import {debounce} from "@/utils";
export default {
  mixins: [fetchData({total:0,rows:[]})],
  data() {
    return {
      current: 1,
    };
  },
  computed: {
    routeInfo() {
      const categoryId = +this.$route.params.categoryId || -1;
      const page = +this.$route.query.page || 1;
      const limit = +this.$route.query.limit || 10;
      return {
        categoryId,
        page,
        limit,
      };
    },
  },
  components: {
    Pager,
    Empty
  },
  methods: {
    async fetchData() {
      return await getBlogs(
        this.routeInfo.page,
        this.routeInfo.limit,
        this.routeInfo.categoryId
      );
    },
    handlePageChange(newPage) {
      const query = {
        page: newPage,
        limit: this.routeInfo.limit,
      };
      // /article?page=${newPage}&limit=${this.routeInfo.limit}
      if (this.routeInfo.categoryId == -1) {
        this.$router.push({
          name: "Blog",
          query,
        });
      } else {
        // /article/cate/${this.routeInfo.categoryId}?page=${newPage}&limit=${this.routeInfo.limit}
        this.$router.push({
          name: "CategoryBlog",
          query,
          params: {
            categoryId: this.routeInfo.categoryId,
          },
        });
      }
    },
    handleScroll(){
      this.$bus.$emit('mainScroll',this.$refs.blogList);
    }
  },
  watch: {
    async $route() {
      this.$refs.blogList.scrollTop = 0;
      this.isLoading = true;
      this.data = await this.fetchData();
      this.isLoading = false;
    },
  },
  mounted(){
    // this.$bus.$on
    const handleScrollDebounce = debounce(this.handleScroll);
    this.$refs.blogList.addEventListener('scroll',handleScrollDebounce);
  },
  destroyed(){
    this.$bus.$off('mainScroll');
  }
};
</script>

<style scoped lang='less'>
@import "~@/styles/mixin.less";
.blog-list-container {
  width: 100%;
  height: 100%;
  .self-scroll();
  &::-webkit-scrollbar {
    display: none;
  }
}

.blog-list-container ul {
  display: flex;
  margin: 0 20px;
  height: 160px;
  border-bottom: 1px solid #e3e3e3;
}
.blog-list-container .main {
  flex: 1 1 400px;
  padding: 10px 15px 0;
  h2 {
    margin: 0;
    font-weight: 700;
  }
  .aside {
    color: #8a8888;
    font-size: 12px;
    margin-bottom: 7px;
    margin-top: 3px;
    span {
      margin-right: 5px;
    }
  }
  .desc {
    font-size: 16px;
    overflow: hidden;
    height: 70px;
    line-height: 23px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; //行数
    -webkit-box-orient: vertical;
  }
}
.blog-list-container .thumb {
  flex: 0 0 150px;
  display: inline-block;
  margin-top: 15px;
  a {
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    border-radius: 5px;
  }
}
</style>